<template>
  <div id="load" v-if="shownum > 0" class="bg">
    <div class="loading" v-if="shownum == 1">
      <i ref="loadcoin"></i>
    </div>
    <div class="loading mark" v-if="shownum == 2">
      <!-- 这东西使用起来必须要有一个块级元素包裹 -->
      <i ref="loadcoin"></i>  
      <p>数据更新中...</p>
    </div>
    <div class="loading mark" v-if="shownum == 3">
      <!-- 这东西使用起来必须要有一个块级元素包裹 -->
      <i ref="loadcoin"></i>  
      <p>正在登录</p>
    </div>
  </div>
</template>

<script>
  var loadtime;
  import lottie from 'lottie-web';
  export default {
    props: {
      loadData: Number
    },
    components: {
      lottie: lottie,
    },
    updated() {
      if(this.loadData > 0) {
        if (document.getElementById("load")) {
          let child = document.getElementById("load");
          let root = document.getElementsByClassName("root")[0];
          let rootTO = document.getElementsByClassName("root")[1];
          if (rootTO) {
            rootTO.appendChild(child);
          } else {
            root.appendChild(child);
          }
        }
      }
      const loadCoinData = require('@p/lottie/loading/data.json');
      this.anim = lottie.loadAnimation({
        container: this.$refs.loadcoin,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        // path: loadCoinData,
        animationData: loadCoinData
      });
    },
    data() {
      return {
        shownum: 0,
      }
    },
    created() {
      
    },
    methods: {
      show() {
        this.shownum = this.loadData;
        window.clearTimeout(loadtime);
        loadtime = setTimeout(() => {
          this.shownum = 0;
          if (this.loadData != 3) {
            this.$toast('请求超时')
          }
        },5000)
      },
      end() {
        this.shownum = 0;
        window.clearTimeout(loadtime);
      }
    },
    // updated() {
    //   if(this.load > 0) {
    //     let child = document.getElementById("load");
    //     document.body.appendChild(child);
    //   }
    // },
  };
</script>

<style lang="less" scoped>
.bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
}
.loading {
  position: absolute;
  width: 48px;
  height: 48px;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  margin-top: -10%;
  z-index: 9992;
  i {
    height: 100%; 
  }
  &.mark {
    width: 104px;
    height: 104px;
    left: calc(50% - 52px);
    top: calc(50% - 52px);
    background-color: #000;
    border-radius: 16px;
    opacity: 0.9;
    text-align: center;
    i {
      display: inline-block;
      width: 48px;
      height: 48px;
      margin-top: 16px;
      margin-bottom: 8px;
    }
    p {
      font-size: 12px;
      color: #fff;
    }
  }
}
</style>
